<template>
	<view class="content">
		<!-- 顶部logo区域 -->
		<view class="header">
			<image src="/static/logo.png" mode="widthFix"></image>
		</view>

		<!-- 表单区域 -->
		<view class="form-container">
			<!-- 手机号输入框 -->
			<view class="input-item">
				<image class="input-icon" src="/static/phone.png" mode="widthFix"></image>
				<input class="input-field" v-model="phone" type="number" maxlength="11" placeholder="手机号" />
			</view>
			
			<!-- 密码输入框 -->
			<view class="input-item">
				<image class="input-icon" src="/static/pwd.png" mode="widthFix"></image>
				<input class="input-field" v-model="password" type="text" maxlength="32" placeholder="登录密码"
					:password="!showPassword" />
				<image class="toggle-icon" :src="showPassword ? '/static/eye.png' : '/static/eye2.png'"
					@tap="display"></image>
			</view>
			
			<!-- 验证码输入框 -->
			<view class="input-item verify-code">
				<image class="input-icon" src="/static/yz.png" mode="widthFix"></image>
				<input class="input-field" v-model="code" type="number" maxlength="4" placeholder="验证码" />
				<view class="get-code-btn" :class="{ disabled: second > 0 }" @tap="getcode">{{ yanzhengma }}</view>
			</view>
			
			<!-- 邀请码输入框 -->
			<view class="input-item">
				<image class="input-icon" src="/static/invite.png" mode="widthFix"></image>
				<input class="input-field" v-model="invitation" type="text" maxlength="12" placeholder="邀请码" />
			</view>
		</view>

		<!-- 注册按钮 -->
		<view class="register-btn" hover-class="btn-hover" @tap="bindLogin">
			<text>注册</text>
		</view>

		<!-- 协议同意区域 -->
		<view class="agreement">
			<image 
				@tap="agreementSuccess"
				:src="agreement ? '/static/ty.png' : '/static/shilu-login/ty0.png'"
				class="checkbox-icon"
				mode="widthFix"
			></image>
			<text @tap="agreementSuccess" class="agree-text">同意</text>
			<navigator url="agreement?id=1" open-type="navigate" class="protocol-link">《软件用户协议》</navigator>
		</view>
	</view>
</template>

<script>
	var timer = null;
	export default {
		onUnload() {
			// 页面卸载时清除定时器
			if (timer) {
				clearInterval(timer);
				timer = null;
			}
		},
		data() {
			return {
				phone: '',
				password: '',
				code: '',
				invitation: '',
				agreement: true,
				showPassword: false,
				second: 0
			};
		},
		computed: {
			yanzhengma() {
				if (this.second === 0) {
					return '获取验证码';
				} else {
					return `重新获取${this.second < 10 ? '0' + this.second : this.second}`;
				}
			}
		},
		methods: {
			// 清除定时器
			clearTimer() {
				if (timer) {
					clearInterval(timer);
					timer = null;
				}
				this.second = 0;
			},
			
			// 切换密码显示状态
			display() {
				this.showPassword = !this.showPassword;
			},
			
			// 切换协议同意状态
			agreementSuccess() {
				this.agreement = !this.agreement;
			},
			
			// 获取验证码
			getcode() {
				// 验证手机号
				if (this.phone.length !== 11) {
					uni.showToast({
						icon: 'none',
						title: '手机号不正确'
					});
					return;
				}
				
				// 防止重复点击
				if (this.second > 0) {
					return;
				}
				
				// 开始倒计时
				this.second = 60;
				timer = setInterval(() => {
					this.second--;
					if (this.second <= 0) {
						this.clearTimer();
					}
				}, 1000);
				
				// 请求验证码
				uni.request({
					url: 'http://***/getcode.html', // 替换为实际接口地址
					data: {
						phone: this.phone,
						type: 'reg'
					},
					method: 'POST',
					dataType: 'json',
					success: (res) => {
						if (res.data.code !== 200) {
							uni.showToast({
								title: res.data.msg || '获取验证码失败',
								icon: 'none'
							});
							this.clearTimer();
						} else {
							uni.showToast({
								title: res.data.msg || '验证码已发送',
								icon: 'none'
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: '网络错误',
							icon: 'none'
						});
						this.clearTimer();
					}
				});
			},
			
			// 注册提交
			bindLogin() {
				// 验证协议
				if (!this.agreement) {
					uni.showToast({
						icon: 'none',
						title: '请先阅读并同意《软件用户协议》'
					});
					return;
				}
				
				// 验证手机号
				if (this.phone.length !== 11) {
					uni.showToast({
						icon: 'none',
						title: '手机号不正确'
					});
					return;
				}
				
				// 验证密码
				if (this.password.length < 6) {
					uni.showToast({
						icon: 'none',
						title: '密码长度不能少于6位'
					});
					return;
				}
				
				// 验证验证码
				if (this.code.length !== 4) {
					uni.showToast({
						icon: 'none',
						title: '验证码不正确'
					});
					return;
				}
				
				// 提交注册
				uni.request({
					url: 'http://***/reg.html', // 替换为实际接口地址
					data: {
						phone: this.phone,
						password: this.password,
						code: this.code,
						invitation: this.invitation
					},
					method: 'POST',
					dataType: 'json',
					success: (res) => {
						if (res.data.code !== 200) {
							uni.showToast({
								title: res.data.msg || '注册失败',
								icon: 'none'
							});
						} else {
							uni.showToast({
								title: res.data.msg || '注册成功',
								icon: 'none'
							});
							setTimeout(() => {
								uni.navigateBack();
							}, 1500);
						}
					},
					fail: () => {
						uni.showToast({
							title: '网络错误',
							icon: 'none'
						});
					}
				});
			}
		}
	};
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		background-color: #ffffff;
		padding-top: 80rpx; /* 顶部整体间距 */
	}

	/* Logo区域 */
	.header {
		width: 160rpx;
		height: 160rpx;
		margin: 0 auto 60rpx; /* 底部间距 */
		background: linear-gradient(135deg, #41d3c9, #87e19e);
		box-shadow: 0 10rpx 20rpx rgba(164, 217, 228, 0.4);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.header image {
		width: 100rpx;
		height: 100rpx;
	}

	/* 表单容器 */
	.form-container {
		width: 100%;
		padding: 0 70rpx;
		box-sizing: border-box;
	}

	/* 输入框样式 */
	.input-item {
		display: flex;
		align-items: center;
		height: 120rpx; /* 输入框高度 */
		border-bottom: 1px solid #f5f5f5; /* 下划线 */
		position: relative;
	}

	.input-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx; /* 图标与输入框间距 */
	}

	.input-field {
		flex: 1;
		font-size: 32rpx;
		color: #333333;
		height: 100%;
		line-height: 120rpx;
	}

	.input-field::placeholder {
		color: #cccccc;
	}

	/* 密码显示切换图标 */
	.toggle-icon {
		width: 40rpx;
		height: 40rpx;
	}

	/* 验证码区域 */
	.verify-code {
		position: relative;
	}

	.get-code-btn {
		width: 180rpx;
		height: 64rpx;
		line-height: 64rpx;
		text-align: center;
		font-size: 26rpx;
		color: #FF7D13; /* 橙色按钮文字 */
		border: 1px solid #FFA800; /* 橙色边框 */
		border-radius: 32rpx; /* 圆角 */
		margin-left: 20rpx;
	}

	.get-code-btn.disabled {
		color: #999999;
		border-color: #999999;
	}

	/* 注册按钮 */
	.register-btn {
		width: 610rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 34rpx;
		color: #FFFFFF;
		background: linear-gradient(90deg, #41d3c9, #87e19e);
		border-radius: 50rpx;
		box-shadow: 0 5rpx 15rpx rgba(164, 217, 228, 0.3);
		margin: 80rpx auto 0; /* 顶部间距 */
	}

	.btn-hover {
		opacity: 0.9;
		transform: scale(0.99);
	}

	/* 协议区域 */
	.agreement {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 60rpx; /* 与按钮的间距 */
		font-size: 26rpx;
	}

	.checkbox-icon {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}

	.agree-text {
		color: #666666;
		margin-right: 10rpx;
	}

	.protocol-link {
		color: #FF7D13; /* 协议链接橙色 */
		text-decoration: none;
	}
</style>
